<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书馆借书还书系统</title>
    <script src="vue.js"></script>
    <style>
        *{
            margin: 0;
        }
        .book-image {
            width: 80px;
            height: 100px;
            margin-right: 40px;
            padding: 10px;
        }
        h1{
            text-align: center;
        }
        h2{
            text-align: center;
        }
        .item1{
            background-color: #c0f87c;
            box-shadow: 0 0 15px 2px rgba(0, 0 , 0,0.2);
        }
        .item2{
            background-color: #ffe776;
            box-shadow: 0 0 15px 2px rgba(0, 0 , 0,0.2);
        }
        .book-description {
            font-size: 0.9em;
            color: #555;
        }
        li{
            margin-bottom: 20px;
            border-bottom: 1px solid #333333 ;
        }
        button{
            margin: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>图书馆借书还书系统</h1>
    <div class="item1">
        <h2>可借书籍</h2>
        <ul>
            <li v-for="book in availableBooks" :key="book.id">
                <img :src="book.image" alt="书籍封面" class="book-image">
                <strong>{{ book.title }}</strong> - {{ book.author }}
                <p class="book-description">{{ book.description }}</p>
                <button @click="borrowBook(book)">借书</button>
            </li>
        </ul>
    </div>
    <div class="item2">
        <h2>已借书籍</h2>
        <ul>
            <li v-for="book in borrowedBooks" :key="book.id">
                <img :src="book.image" alt="书籍封面" class="book-image">
                <strong>{{ book.title }}</strong> - {{ book.author }}
                <p class="book-description">{{ book.description }}</p>
                <button @click="returnBook(book)">还书</button>
            </li>
        </ul>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            availableBooks: [
                { id: 1,
                    title: '《百年孤独》',
                    image: 'https://img0.baidu.com/it/u=1646076879,885295748&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=607',
                    author:'加西亚·马尔克斯',
                    description: '《百年孤独》是哥伦比亚作家加西亚·马尔克斯创作的长篇小说，是其代表作，也是拉丁美洲魔幻现实主义文学的代表作，被誉为“再现拉丁美洲历史社会图景的鸿篇巨著”。' },
                { id: 2,
                    title: '《小王子》',
                    image: 'https://img2.baidu.com/it/u=3542337903,628452790&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=657' ,
                    author: '安东尼·德·圣埃克苏佩里',
                    description:'《小王子》是法国作家‌安托万·德·圣·埃克苏佩里创作的儿童文学短篇小说，讲述了小王子从自己星球出发前往地球的过程中，所经历的各种历险。'
                },
                { id: 3,
                    title: '《1984》',
                    image: 'https://img2.baidu.com/it/u=4086974626,4144310904&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300',
                    author: '乔治·奥威尔'  ,
                    description:'‌《1984》是一部伟大的政治寓言，描绘了一个极权主义、全民监控的世界，揭示了专制政府对人类自由和尊严的摧残。‌这部作品由英国作家乔治·奥威尔创作，发表于1949年。小说通过主人公温斯顿·史密斯的经历，展示了极权政府如何通过严密监控和言论审查控制人民，剥夺他们的自由和隐私，同时反映了作者对社会主义国家和共产主义的担忧，认为这种制度会导致人类丧失尊严和创造力。小说深刻揭示了未来政治不稳定和大规模监视的真相，以及对个人自由的侵犯，成为世界文学史上的经典之作‌'},
                { id: 4,
                    title: '《呐喊》',
                    image: 'https://img1.baidu.com/it/u=3829904007,260859632&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
                    author: '鲁迅'  ,
                    description:'‌《呐喊》是鲁迅的短篇小说集，收录了1918年至1922年间创作的14篇作品，真实描绘了从辛亥革命到五四运动时期的社会生活，深刻剖析和否定了旧中国的制度和传统观念，展现了强烈的民族忧患意识和社会变革的希望。‌这部作品集通过多种文学手法，塑造了一系列生动的人物形象，有力地揭露和鞭挞了封建旧恶势力，表达了作者渴望变革、为时代呐喊、希望唤醒国民的思想。它是中国现代现实主义文学的开端与成熟的标志，奠定了鲁迅在中国现代文学史和现代文化史上的重要地位‌'},
                { id: 5,
                    title: '《活着》',
                    image: 'https://q3.itc.cn/q_70/images01/20240510/f9a85427134f4b07832baec04f68d466.png',
                    author: '余华' ,
                    description:'《活着》是一本值得一读再读的经典之作。它以福贵一家的故事,展现了人性中最真实、最坚韧的一面,同时也传递了对生活的热爱和对未来的希望'},
                { id: 6,
                    title: '《你当像鸟飞往你的山》',
                    image: 'https://img2.baidu.com/it/u=1761361603,329766659&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
                    author: '塔拉·韦斯特弗' ,
                    description:'‌《你当像鸟飞往你的山》‌是一本自传体小说，讲述了塔拉·韦斯特弗如何挣脱原生家庭的束缚，通过不断学习实现自我救赎与解放的故事。这本书从教育和原生家庭两个角度出发，展现了作者从极端宗教家庭中走出，最终成为剑桥大学博士的艰辛历程。通过这本书，读者可以深刻感受到教育对于个人成长的重要性，以及面对原生家庭的复杂情感如何通过自我认知和努力得到解决和超越‌'}
            ],
            borrowedBooks: []
        },
        methods: {
            borrowBook(book) {
                if (this.borrowedBooks.length < 2) {
                    this.availableBooks = this.availableBooks.filter(b => b.id !== book.id);
                    this.borrowedBooks.push(book);
                } else {
                    alert("每人最多只能借两本书。");
                }
            },
            returnBook(book) {
                this.borrowedBooks = this.borrowedBooks.filter(b => b.id !== book.id);
                this.availableBooks.push(book);
            }
        }
    })
</script>
</body>
</html>
